<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

	<!--
	Supersized - Fullscreen Background jQuery Plugin
	Flickr Edition Version 1.1.2
	www.buildinternet.com/project/supersized
	
	By Sam Dunn / One Mighty Roar (www.onemightyroar.com)
	Released under MIT License / GPL License
	-->

	<head>

	<title>Supersized - Full Screen Background/Slideshow jQuery Plugin</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
	<script type="text/javascript" src="js/supersized.flickr.1.1.2.js"></script>
	
	<script type="text/javascript">
	
		jQuery(function($){
			$.supersized({
			
				//Functionality
				slideshow               :   1,		//Slideshow on/off
				autoplay				:	1,		//Slideshow starts playing automatically
				start_slide             :   1,		//Start slide (0 is random)
				random					: 	0,		//Randomize slide order (Ignores start slide)
				slide_interval          :   5000,	//Length between transitions
				transition              :   1, 		//0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
				transition_speed		:	750,	//Speed of transition
				new_window				:	1,		//Image links open in new window/tab
				pause_hover             :   0,		//Pause slideshow on hover
				keyboard_nav            :   1,		//Keyboard navigation on/off
				performance				:	1,		//0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
				image_protect			:	1,		//Disables image dragging and right click with Javascript
				image_path				:	'img/', //Default image path
				
				//Size & Position
				min_width		        :   0,		//Min width allowed (in pixels)
				min_height		        :   0,		//Min height allowed (in pixels)
				vertical_center         :   1,		//Vertically center background
				horizontal_center       :   1,		//Horizontally center background
				fit_portrait         	:   1,		//Portrait images will not exceed browser height
				fit_landscape			:   0,		//Landscape images will not exceed browser width  
				
				//Components
				navigation              :   1,		//Slideshow controls on/off
				thumbnail_navigation    :   1,		//Thumbnail navigation
				slide_counter           :   1,		//Display slide numbers
				slide_captions          :   1,		//Slide caption (Pull from "title" in slides array)
				
				//Flickr
				source					:	1,						//1-Set, 2-User, 3-Group, 4-Tags
				set                     :   '72157636433085315', 				//Flickr set ID (found in URL)
				user					:	'105037427@N03',				//Flickr user ID (http://idgettr.com/)
				group					:	'######', 				//Flickr group ID (http://idgettr.com/)
				tags			: '###,###',    //Comma separated tags
				total_slides			:	100,					//How many pictures to pull (Between 1-500)
				image_size              :   'z', 					//Flickr Image Size - t,s,m,z,b  (Details: http://www.flickr.com/services/api/misc.urls.html)
				sort_by			:    1,		//1-Date Posted, 2-Date Taken, 3-Interestingness
				sort_direction		:    0,		//0-descending, 1-ascending
				
				/**
	    		FLICKR API KEY
	    		NEED TO GET YOUR OWN -- http://www.flickr.com/services/apps/create/
	    		**/
				api_key					:	'6db93eb13226a884a267d4b107902ab4'		//Flickr API Key
					
			}); 
		});
		
	</script>
	
	<style type="text/css">
		
			/*Demo Styles*/
			p{ padding:0 30px 30px 30px; color:#fff; font:11pt "Helvetica Neue", "Helvetica", Arial, sans-serif; text-shadow: #000 0px 1px 0px; line-height:200%; }
				p a{ font-size:10pt; text-decoration:none; outline: none; color:#ddd; background:#222; border-top:1px solid #333; padding:5px 8px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; -moz-box-shadow: 0px 1px 1px #000; -webkit-box-shadow: 0px 1px 1px #000; box-shadow: 0px 1px 1px #000; }
					p a:hover{ background-color:#427cb4; border-color:#5c94cb; color:#fff; }
			h3{ padding:30px 30px 20px 30px; }
			
			#content{ position:absolute; top:50px; left:50px; background:#111; background:rgba(0,0,0,0.65); width:360px; text-align:left; }
			.stamp{ float: right; margin: 15px 30px 0 0;}
			
	</style>
	
</head>

<body>

	<div id="content">
		<!--<h3><a href="http://www.buildinternet.com" ><img src="img/buildinternet-logo.png"/></a></h3>
		<p>
			From the Nonsense Society Flickr Pool<br/>
			<a href="http://www.nonsensesociety.com" alt="Nonsense Society" target="_blank">Nonsense Society</a>
			<a href="http://flickr.com/groups/nonsensesociety/" alt="Flickr Pool" target="_blank">Flickr Pool</a>
		</p>-->
	</div>

<div id="prevthumb"></div>
<div id="nextthumb"></div>
		

<!--Control Bar-->
<div id="controls-wrapper">
	<div id="controls">
	
		<!--Slide counter-->
		<div id="slidecounter">
			<span class="slidenumber"></span>/<span class="totalslides"></span>
		</div>
		
		<!--Slide captions displayed here-->
		<div id="slidecaption"></div>
		
		<!--Navigation-->
		<div id="navigation">
			<img id="prevslide" src="img/back_dull.png"/><img id="pauseplay" src="img/pause_dull.png"/><img id="nextslide" src="img/forward_dull.png"/>
		</div>
		
		<a href="http://www.buildinternet.com" class="stamp"><img src="img/supersized-logo.png"/></a>
		
	</div>
</div>


</body>
</html>
